<template>
  <a-modal
    v-model:visible="visible"
    :footer="null"
    :title="$t('other.roadAdd')"
    width="90%"
    wrap-class-name="large-modal"
    :maskClosable="false"
    :confirm-loading="loading"
    :keyboard="false"
  >
    <a-spin :spinning="loading">
      <div class="route-chart-modal-container">
        <aside>
          <a-row class="moinfo-box pb-20">
            <a-col :span="24" class="mb-8">
              <div>{{$t('hangManage.makeNo')}}：</div> 
              <div>{{ moInfo.moNo }} </div>
            </a-col>
            <a-col :span="24" class="mb-8">
              <div>{{$t('basicData.styleNo')}}：</div>
              <div>{{ moInfo.styleNo }} </div>
            </a-col>
            <a-col :span="24">
              <div> {{$t('basicData.styleNa') }}：</div>
              <div>{{ moInfo.styleName }} </div>
            </a-col>
          </a-row>
          <div class="version-box">
            <a-form :model="formState" ref="formRef" layout="vertical">
              <a-form-item
                :label="$t('hangManage.roadVerName')"
                :rules="routeRule.name"
                name="name"
              >
                <a-input
                  v-model:value.trim="formState.name"
                  :maxLength="19"
                  :placeholder="$t('common.pleaseInput')"
                />
              </a-form-item>
              <a-form-item
                :label="t('basicData.section')"
                name="section"
                :rules="routeRule.section"
              >
                <a-select
                  :placeholder="$t('common.pleaseSelect')"
                  allowClear
                  v-model:value="formState.section"
                >
                  <a-select-option
                    v-for="(item, index) in [t('components.dg')]"
                    :key="index"
                    :value="item"
                    >{{ item }}</a-select-option
                  >
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('hangManage.startProcess')" name="firstProcess">
                <a-select
                  :placeholder="$t('common.pleaseSelect')"
                  allowClear
                  v-model:value="formState.firstProcess"
                >
                  <a-select-option
                    v-for="(item, index) in processOption"
                    :key="index"
                    :value="item.processDetailId"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('hangManage.endProcess')" name="lastProcess">
                <a-select
                  :placeholder="$t('common.pleaseSelect')"
                  allowClear
                  v-model:value="formState.lastProcess"
                >
                  <a-select-option
                    v-for="(item, index) in processOption"
                    :disabled="!index"
                    :key="index"
                    :value="item.processDetailId"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
              <!--<a-form-item label="产量工序" name="lastProcess">
                <a-select
                  placeholder="默认最后一道工序"
                  allowClear
                  v-model:value="formState.lastProcess"
                >
                  <a-select-option
                    v-for="(item, index) in processOption"
                    :disabled="!index"
                    :key="index"
                    :value="item.processDetailId"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>-->
            </a-form>
          </div>
        </aside>
        <section>
          <roadmapList
            v-if="visible"
            ref="roadmapListRef"
            :roueteVersionId="roueteVersionId"
            :moId="moId"
            :moInfo="moInfo"
            operateType="add"
            @onProcessInfo="onProcessInfo"
          />
        </section>
      </div>
      <div class="modal-operate-btn">
        <a-button class="cancel" @click="onCancle">{{$t('common.cancel')}}</a-button>
        <a-button type="primary" class="confirm" @click="onConfirm">{{$t('common.ok')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>
<script setup>
import { ref } from "vue";
import roadmapList from "./roadmapList";
import { routeRule } from "./routeChartConfig";
import { message } from "ant-design-vue";
import axios from "@/utils/request";
import { cloneDeep } from "lodash"
import i18n from '@/locales/index' 
const { t } = i18n.global;
let visible = ref(false);
const loading = ref(false);
let moId = ref(null); // 制单id
let moInfo = ref({});
let roueteVersionId = ref(null);
let roadmapListRef = ref();
const formState = ref({});
let formRef = ref();
let processOption = ref([]);
const emits = defineEmits(["ok"]);
const open = async (record) => {
  visible.value = true;
  loading.value = true;
  formState.value = { section: t('components.dg') };
  try {
    moId.value = record.moId;
    await getMakeInfo(moId.value);
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const onProcessInfo = (data, isDelete) => {
  processOption.value = data;
  if (isDelete) {
    formState.value.firstProcess = undefined;
    formState.value.lastProcess = undefined;
  }
};
const getMakeInfo = async (id) => {
  // 制单信息
  try {
    const res = await axios.getAction("/api/mo/mo/get", { id });
    moInfo.value = res.data || {};
  } catch {
    message.warning(t('components.getDataErrorPleaseHolder'));
    moInfo.value = {};
  }
};
const queryTableParams = (tableList) => {
  let hangerLineList = [];
  tableList.forEach((item, index) => {
    item.sort = item.sort || index + 1;
    item.forwardIntegration = item.forwardMerge ? 1 : 0;
    item.enable = item.effect ? 1 : 0;
    item.moId = item.moId || moId.value;
    item.moProcRoadmapProcStationList.forEach((el, i) => {
      el.sort = i + 1;
      el.mainAuxiliaryStation = el.mainStationBoolean ? 2 : 1;
      el.receiveHanger = el.receiveHangerBoolean ? 1 : 0;
      el.moId = el.moId || moId.value;
      hangerLineList.push(el.hangerLineId);
    });
  });
  return {
    tableList,
    hangerLineList: Array.from(new Set(hangerLineList)),
  };
};
const queryParams = () => {
  let { tableList, processId } = roadmapListRef.value;
  let params = Object.assign({}, formState.value);
  let tableData = queryTableParams(cloneDeep(tableList));
  params.moProcRoadmapProcList = tableData.tableList;
  params.hangerLineIdList = tableData.hangerLineList;
  params.moId = moId.value;
  params.processId = processId;
  params.createType = '手动';
  return params;
};
const onCancle = () => {
  roadmapListRef.value.tableList = [];
  roadmapListRef.value.processId = null;
  visible.value = false;
  moInfo.value = {};
  roueteVersionId.value = null;
  moId.value = null;
};
const onConfirm = async () => {
  try {
    loading.value = true;
    await formRef.value.validateFields();
    let params = queryParams();
    const res = await axios.postAction("/api/mo/mo-proc-roadmap/save", params);
    if (res.success) {
      message.success(res.msg || t('common.doSuccess'));
      loading.value = false;
      emits("ok");
      onCancle();
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
defineExpose({
  open,
});
</script>